<!-- 电表详情 -->
<template>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from 'echarts'
import {AjaxCommon, md5} from '@/libs/apiCommon'
import {getToken} from '@/libs/util'
import {Utility} from '@/libs/utility'
import moment from 'moment'
export default {
    name: 'hourEcharts',
    components: {},
    props: ['dir', 'deviceInfo'],
    data() {
        return {
            myChart: null,
            xData: [], //横坐标
            yData: [], //数据
            myChartStyle: {float: 'left', width: '100%', height: '280px'} //图表样式
        }
    },
    computed: {
        cDir() {
            return this.dir
        }
    },
    watch: {
        cDir() {
            this.myChart.resize()
        },
        deviceInfo: {
            handler(di) {
                if (di) {
                    this.getData()
                }
            },
            deep: true,
            immediate: false
        }
    },
    created() {
        this.getData()
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            const deviceInfo = this.deviceInfo
            const id = deviceInfo?.eq_guid ? deviceInfo.eq_guid : deviceInfo.id
            const dateTime = Utility.getCurrentTime()
            /// day_type 查询类型 天 为 d  月为m  年为y 小时为h   72小时为 72h
            // index_type 时间类型，默认0为小时数据，1为时段数据（如上午班、下午班、夜间等）
            // A_frequency : 数据采集频率，默认60分钟，可选15分钟，目前只有15和60
            const params = `/api/EqMonitor/EQ_Day_Out?EqGuid=${id}&CalDATE=${dateTime}&day_type=72h&index_type=0&A_frequency=60`
            AjaxCommon(params, 'get', null, true, id).then((res) => {
                const data = res.data.Message
                this.initEcharts(data)
            })
        },
        initEcharts(data) {
            let xData = []
            let yData = []
            data?.map((t) => {
                // const xValue = parseInt(moment(t.time).format('HH')) + '时'
                const xValue = t.time
                xData.push(xValue)
                yData.push(t.value)
            })
            this.xData = xData
            this.yData = yData
            // 基本柱状图
            const option = {
                title: {
                    text: '',
                    subtext: '                  kWh'
                },
                xAxis: {
                    data: this.xData,
                    axisLabel: {
                        // interval: 0 // 强制显示所有标签
                        // rotate: 30 // 通过旋转解决标签显示不下的问题
                        formatter: function (value) {
                            const xValue = parseInt(moment(value).format('HH')) + '时'
                            return xValue
                        }
                    }
                },
                yAxis: {},
                grid: {
                    top: '15%',
                    bottom: '28%',
                    left: '5%',
                    right: '1%'
                },
                tooltip: {
                    // Tooltip在echarts范围内
                    confine: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var tar = params[0]
                        return tar.name + ' : ' + tar.value + 'kWh'
                    }
                },
                series: [
                    {
                        type: 'bar', //形状为柱状图
                        data: this.yData,
                        itemStyle: {
                            color: '#2680FB'
                        }
                    }
                ]
                // dataZoom: [
                //     {
                //         show: true, // 显示滚动条
                //         type: 'slider', // 滚动条类型
                //         backgroundColor: 'rgb(19, 63, 100)', // 背景颜色
                //         fillerColor: 'rgb(16, 171, 198)', // 选中范围的填充颜色
                //         borderColor: 'rgb(19, 63, 100)', // 边框颜色
                //         showDetail: false, // 拖拽时是否显示详细数值信息
                //         startValue: 0, // 数据窗口范围的起始数值
                //         endValue: 5, // 数据窗口范围的结束数值
                //         filterMode: 'empty', // 当前数据窗口外的数据被设置为空
                //         width: '50%', // 滚动条宽度
                //         height: 8, // 滚动条高度
                //         left: 'center', // 滚动条显示位置
                //         zoomLock: true, // 锁定选择区域的大小
                //         handleSize: 5, // 控制手柄的尺寸
                //         bottom: '14%' // 滚动条距离容器下侧的距离
                //     },
                //     {
                //         type: 'inside', // 内部滚动条
                //         zoomOnMouseWheel: false, // 滚轮是否触发缩放
                //         moveOnMouseMove: true, // 鼠标移动触发平移
                //         moveOnMouseWheel: true // 鼠标滚轮触发平移
                //     }
                // ]
            }
            const myChart = echarts.init(document.getElementById('mychart'))
            myChart.setOption(option)
            this.myChart = myChart
            myChart.resize()
        }
    }
}
</script>

<style scoped>
.echart {
    overflow: hidden;
}
</style>
